<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	p{
		border:3px solid red;
		padding:10px;
		width:400px;
		background:#fff;
	}
	p.odd{
	 	/*  static:기본위치지정방식 문서의 기본흐름을 따른다. top,left가  영향을 끼치지못함, 
	 		relative:자기의 기본위치에서 상대적으로  top,left  적용,
	 		absolute:페이지 기본흐름을 따르지 않는다. nonstatic으로 지정된 첫번째 부모 엘리먼트에(position이 static이아닌부모) 
	 				  상대적으로 위치가 설정된다.부모가 없으면 전체 문서에 상대적으로 설정됨.- 부모엘리먼트안에 위치  
	 		fixed:브라우저창에 상대적으로 지정된다.
	 	*/
		position:fixed;   
		top:20px;
		right:0px;
	}
</style>
<script>

	var showElem = function(){
		var elem=document.getElementsByTagName("p")[1];
		elem.style="position:relative;top:0px;left:0px;";
	}
	window.onload=function(e){
		document.getElementById("btn1").onclick=showElem;
	}
</script>
</head>
<body>
	<p>첫번째 엘리먼트Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ...</p>
    <p class='odd'>두번째 엘리먼트Phasellus dictum dignissim justo. Duis nec risus id nunc ...</p>
    <p>세번째 엘리먼트Sed vel leo. Nulla iaculis, tortor non laoreet dictum, turpis diam ...</p>
    <button id="btn1">두번째 엘리먼트 보이기</button>
</body>
</html>